<template>
  <div style="width:100vw;">
    <div v-show="performances.length > 0" class="header-png">
      <img src="@/assets/homePicture/header.png" alt />
    </div>
    <!-- 返回按钮 -->
    <!-- <mt-header fixed title="绩效详情">
      <router-link to="/" slot="left">
        <mt-button class="back-butt" icon="back"></mt-button>
      </router-link>
    </mt-header>-->
    <div class="merits-box">
      <div class="default-page-box" v-show="performances.length == 0">
        <div class="default-page">
          <div class="default-text">哎呀，空空如也!</div>
        </div>
      </div>
      <div v-show="performances.length > 0" class="merits-card">
        <div class="card-title flex-row">
          <div style="text-align:center;width:100%;" class="time">{{performances[0].perTime}}</div>
        </div>
        <div class="card-body flex-row">
          <div class="flex-row">
            <div  
            :style="`background-image:url(${meritsDetail.photo || require('@/assets/homePicture/03.png')});`"
            class="user-head">
              <!-- <img src="@/assets/homePicture/03.png" alt /> -->
            </div>
            <div class="user-content-box">
              <div class="user-name">{{meritsDetail.username}}</div>
              <div class="user-content">{{meritsDetail.deptName}}</div>
            </div>
          </div>
          <div class="user-content-box">
            <div class="merits-sort">绩效得分</div>
            <div style="font-size:0.6rem;" class="merits-num">{{introduce || '暂无'}}</div>
          </div>
        </div>
      </div>
      <div style="height:71vh;" class="bscroll" ref="bscroll">
        <div class="bscroll-container">
          <div v-for="(item,index) in performances" :key="index" class="merits-item">
            <div class="item-tip">{{item.perTime}}</div>
            <div class="item-content flex-row">
              <div class="item-partment">{{item.perdept}}</div>
              <div class="level">{{item.introduce}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url("~@/pagecss/meritsDetail.less");
.header-png {
  position: absolute;
  height: 200/75rem;
  left: 0;
  right: 0;
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
</style>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
export default {
  name: "meritsDetail",
  data() {
    return {
      msg: "",
      meritsDetail: {},
      performances: [],
      introduce: ""
    };
  },
  mounted() {
    let that = this;
    let { queue, sort } = this.$route.query;
    let params = {
      queue,
      sort
    };
    that.$get("getPer", params).then(res => {
      if (res.success) {
        that.meritsDetail = res.data;
        that.performances = res.data.performances;
        if(res.data.performances.length > 0){
          that.introduce = res.data.performances[0].introduce;
        }
      }
    });
    // better-scroll初始化
    that.$nextTick(() => {
      let bscrollDom = that.$refs.bscroll;
      that.aBScroll = new BScroll(bscrollDom, {
        click: true
      });
    });
    setText("绩效详情");
  },
  methods: {}
};
</script>